<template>
  <div class="page-cont">
    <van-nav-bar
      title="忘记密码"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <van-form
        ref="vform"
        @submit="onSubmit"
      >
        <van-field
          v-model="form.loginname"
          name="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="form.code"
          center
          clearable
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="primary"
              @click.stop="getCode"
              :disabled="!form.loginname || !!smsTime"
            >
              {{ smsTime ? `${smsTime}s后重试` : '获取验证码' }}
            </van-button>
          </template>
        </van-field>

        <van-field
          type="password"
          v-model="form.password"
          placeholder="输入新密码"
          :rules="[{ required: true, message: '请填写密码', validator: validatorPwd }]"
        />
        <van-field
          type="password"
          v-model="form.password2"
          placeholder="再次输入密码"
          :rules="[{ message: '两次密码输入不一致', validator: validatorPwd2 }]"
        />
      </van-form>      
      <div class="tips">
        密码规则：<br>
        密码必须包含字母或者数字，长度不小于6位
      </div>
    </div>
    <van-button
      type="info"
      block
      @click="enterForm"
    >
      确认
    </van-button>
  </div>
</template>

<script>
export default {
  name: "ProtocolPage",
  data() {
    return {
      smsTime: 0,
      smsTimer: null,
      form: {
        type: "mobile", //  mobile email 
        loginname: '',
        password: '',
        password2: '',
        code: ''
      }
    };
  },
  methods: {
    validatorPwd(value, rule) {
      let reg = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,}$/;
      if (!reg.test(value)) {
        rule.message = '密码复杂度不符合要求'
        return false
      }
      return true
    },
    validatorPwd2(value) {
      if (value === this.form.password) {
        return true;
      }
      return false;
    },
    enterForm() {
      this.$refs.vform.submit()
    },
    onSubmit() {
      console.log('提交表单')
    },
    async getCode() {
      // 验证用户名
      if (!this.form.loginname) return this.$toast.fail('请输入用户名');

      // let res = await this.api.CHECK_USER_EXIST({ loginname: this.form.loginname })
      this.smsTime = 60
      this.smsTimer = setInterval(() => {
        this.smsTime--
        if (this.smsTime == 0) {
          clearInterval(this.smsTimer)
          this.smsTimer = null
        }
      }, 1000)
    }
  },
};
</script>

<style lang="scss" scoped>
.page-cont {
  height: 100vh;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  .list {
    flex: 1;
    height: 0;
    overflow: hidden;
    overflow-y: auto;
    font-size: 14px;
    ::v-deep {
      .van-cell {
        border-bottom: 1px solid #f5f5f5;
      }
      input{
        color: #333;
        &::placeholder{
          color: #999;
        }
      }
    }
    .tips {
      padding: 15px;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>
